<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0,maximum-scale=1.0" />
	<meta itemprop="image" content="http://xn--czr85lks2d.tel/jsp/shangxueyuan/images/logo.png" />
	<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- UC强制全屏 --> 
<meta name="full-screen" content="yes">
<!-- UC应用模式 --> 
<meta name="browsermode" content="application">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- 是针对一些老的不识别viewport的浏览器，列如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
	<title>张家湾通关记</title>
	<link rel="stylesheet" type="text/css" href="css/base.css">
	<link rel="stylesheet" type="text/css" href="css/swiper-3.4.2.min.css">
	<link rel="stylesheet" type="text/css" href="css/animate.css">
	<link rel="stylesheet" type="text/css" href="css/index.css">
	<link rel="apple-touch-icon" href="images/logoHome.png" />
	<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
	<!-- <script type="text/javascript" src="js/swiper.min.js"></script>
	<script type="text/javascript" src="js/swiper.animate1.0.3.min.js" ></script> -->
	<script type="text/javascript" src="js/jqmeter.js"></script>
	<!-- <script src="js/jweixin-1.0.0.js"></script> -->
	<!-- <script src="js/fenxiang.js"></script> -->
	<script type="text/javascript" src="js/index.js"></script> 
	<style>	
	.fanz{position:relative;color:#fff;text-align:center;line-height:120px;transform-style:preserve-3d;transition:1s; transform:rotateY(180deg);}
	</style>
	<script>
		var newRem = function(){
            var html = document.documentElement;
            html.style.fontSize = html.getBoundingClientRect().width / 16 + 'px';
        };
        window.addEventListener('resize', newRem, false);
        newRem();
	</script>
</head>
<body>
	<!-- 加载页面 -->
	<div style="margin:0 auto; width:0; height:0; overflow:hidden;">
		<img src="images/12336.jpg" alt="">
	</div>
	<div class="dyp">
		<!-- 进度条 -->
		<div id="jqmeter-container"></div> 
	</div>

	<!-- 点击开始游戏 -->
	<div class="begin" id="begin">
		<div class="qiao"></div>
	    <div id="move1" style="position:absolute;">
	    	<img src="images/1.png" alt="" />
	    </div>
		<div class="click">
			<div class="shou"></div>
		</div>
	</div>
	<!-- 场景 -->
	<div class="boxs">
		<!-- 小人 -->
		<div id="box">
			<div class="fumian1"></div>
			<div class="fumian2"></div>
			<img class="ztbg" src="images/11.png" alt="" />
		    <div id="move_div" style="position:absolute;">
		       <img class="dtimg" src="images/1.png" alt="" />
		    </div>
		</div>

		<div class="box">
			<!-- 计分器 -->
			<div class="jsbox clearfix">
				<div class="jindubox fl">
					<div class="jindu"></div>
				</div>
				
			</div>
			<!-- 掷色子 -->
			<div id="main">
			    <div class="demo">
			        <div class="wrap">
			            <div id="dice" class="dice dice_1"></div>
			        </div>
			    </div>
			</div>
			<!-- 音乐 -->
			<div class="audio_div" style="background:url(images/music_on.png) no-repeat center bottom;background-size:cover;">
				<audio id="mp3Btn" loop autoplay="autoplay">
					<source src="images/zuixingfuderen.mp3" type="audio/mpeg" />
				</audio>
			</div>
			
		    <!-- 题目 -->
		    <div class="tmbox">
		    	<ul class="topic clearfix">
			    	<li class="topic-li fl" style="background:url(images/21.png) no-repeat; background-size:100%;">
			    		<div class="t1"><span></span></div>
			    		<div class="t2 correct"><span></span></div>
			    		<div class="t3"><span></span></div>
			    	</li>
			    	<li class="topic-li fl"  style="background:url(images/23.png) no-repeat; background-size:100%;">
			    		<div class="t1 correct"><span></span></div>
			    		<div class="t2"><span></span></div>
			    		<div class="t3"><span></span></div>
			    	</li>
			    	<li class="topic-li fl"  style="background:url(images/24.png) no-repeat; background-size:100%;">
			    		<div class="t1 correct"><span></span></div>
			    		<div class="t2"><span></span></div>
			    		<div class="t3"><span></span></div>
			    	</li>
			    	<li class="topic-li fl"  style="background:url(images/25.png) no-repeat; background-size:100%;">
			    		<div class="t1 correct"><span></span></div>
			    		<div class="t2"><span></span></div>
			    		<div class="t3"><span></span></div>
			    	</li>
			    	<li class="topic-li fl"  style="background:url(images/26.png) no-repeat; background-size:100%;">
			    		<div class="t1 correct "><span></span></div>
			    		<div class="t2"><span></span></div>
			    		<div class="t3"><span></span></div>
			    	</li>
			    </ul>
		    </div>
			<div class="go">
				<div class="shou"></div>
				<audio id="mp4Btn">
					<source src="images/texiao.mp3" type="audio/mpeg" />
				</audio>
			</div>
		</div>
	</div>

	<!-- 闯关成功与失败 -->
	<div class="jieguo">
		<img class="fenshus" src="images/001.png" alt="">
		<div class="zlyc">
			<a href="file:///E:/add/htdocs/zhangjawan/index.html"></a>
		</div>
	</div>
	<!-- 介绍页面 -->
	<div class="jianjie animated">
		<div class="dianji shou"></div>
	</div>
</body>
	
</html>